<template>
  <div class="payResult">
    <div class="top">
      <img src="../assets/paySuccees.png" alt />
      <div>
        <p style="color:red">{{orderData.payStatus==3?'提交成功，您待汇款金额为'+orderData.totalAmount+'元!':'您已支付成功,您的支付金额为'+orderData.totalAmount+'元!'}}</p>
        <p>收款账户名称：{{orderData.bankAccountName}}</p>
        <p v-show="orderData.payStatus==3">收款账户为：{{orderData.bankAccount}}，开户行：{{orderData.bankBankName}}</p>
      </div>
    </div>
    <div class="zt">德一广告中心后台正在审核，请耐心等待</div>
    <div class="zt"><span style="color:red">{{tenTime}}</span> 秒之后将跳转商家页面...</div>
    <el-button type="primary" @click="$router.push('/package')">跳转页面</el-button>
  </div>
</template>
<script>
export default {
  props: ["orderData"],
  data() {
    return {
      tenTime: 10,
    };
  },
  mounted() {
    // 十秒倒计时
    this.time = setInterval(() => {
      this.tenTime--;
      if (this.tenTime == 0) {
        this.$router.push("/package");
      }
    }, 1000);
  },
  // 销毁时清除定时器
  destroyed() {
    clearInterval(this.time);
  },
};
</script>
<style scoped>
.payResult {
  height: 100%;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  border: 1px solid;
  font-size: 14px;
}
.top {
  margin-top: 130px;
  margin-left: 130px;
  margin-bottom: 80px;
  display: flex;
  align-items: center;
}
.payResult img {
  width: 35px;
  margin-right: 20px;
}
.top p {
  line-height: 30px;
}
.zt {
  text-align: center;
  line-height: 30px;
}
.payResult .el-button {
  width: 120px;
  margin-left: 520px;
  margin-top: 50px;
}
</style>